<template>
	<div class="addUpdate-box">
		<div class="topBox">
			<span class="el-icon-s-data">商品添加.修改</span>
			<router-link to="/backendManage/commodityList">
				<b>返回列表</b>
			</router-link>
			<button class="el-icon-document-checked" @click="addUpdate()">保存...</button>
		</div>
		<div class="addUpdateList">
			<div class="addUpdateListSon1">
				<el-image style="width: 40vh;height: 40vh;margin-top: 30px;"
						:src="`http://127.0.0.1/api/public/showimg/${form.pic}`">
				</el-image>
				<el-upload class="avatar-uploader" :multipe="false"
				:show-file-list="true" :auto-upload="false"
				:before-upload="beforeAvatarUpload" 
				:file-list="fileList"
				:on-change="handleChange"
				 action = "uploadAction"
				list-type="picture"
				accept="image/jpg,image/jpeg,image/png">
				<h2>点击这里更新图片</h2>
				</el-upload>
			</div>
			<div class="addUpdateListSon2">
				<el-form :model="form" label-width="80px">
					<el-form-item label="商品名称">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="商品序号">
						<el-input v-model="form.sn"></el-input>
					</el-form-item>
					<el-form-item label="商品价格">
						<el-input v-model="form.price"></el-input>
					</el-form-item>
					<el-form-item label="商品厂商">
						<el-input v-model="form.maker"></el-input>
					</el-form-item>
					<el-form-item label="书籍作者">
						<el-input v-model="form.author"></el-input>
					</el-form-item>
					<el-form-item label="出厂时间">
						<el-input v-model="form.tmake" type="date"></el-input>
					</el-form-item>
					<el-form-item label="商品库存">
						<el-input v-model="form.stock"></el-input>
					</el-form-item>
					<el-form-item label="商品类型">
						<el-cascader
						    v-model="form.type.id"
						    :options="options" style="width: 300px;"></el-cascader>
					</el-form-item>
					<el-form-item label="商品详情">
						<el-input
						v-model="form.info"
						type="textarea"
						></el-input>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name:'AddUpateCommodity',
		data(){
			return{
				form:{
					id:0,
					type:{
						id:0
					}
				},	
				fileList:[],
				types:[],
				bookTid:null,
				id:'',
				typeid:0,
				//级联选择器数组
				options:[],
			}
		},
		methods:{
			addUpdate(){
				let fd=new FormData();
				fd.append("id",this.form.id);
				fd.append("typid",this.form.id);
				if(this.fileList[0]){
					fd.append("mypic",this.fileList[0].raw);
				}
				fd.append("pic",this.form.pic);
				fd.append("name",this.form.name);
				fd.append("sn",this.form.sn);
				fd.append("price",this.form.price);
				fd.append("maker",this.form.maker);
				fd.append("author",this.form.author);
				fd.append("date",this.form.date);
				fd.append("info",this.form.info);
				fd.append("tmake",this.form.tmake);
				fd.append("stock",this.form.stock);
				fd.append("type.id",this.form.type.id);
				this.$postf("/api/adm/book/add",fd)
				.then((resp)=>{
					console.log(resp)
					if(this.form.id == 0) {
						this.$message("添加成功！！");
					}else {
						this.$message("修改成功！！");
					}
				})
			},
			findById(){
				if(this.$route.query.id!=0){
					this.$get("/api/adm/book/findById/"+this.$route.query.id)
					.then((resp)=>{
						this.form=resp.data.data;
					})
				}else if(this.$route.query.id=0){
					this.form={};
					this.form.id=0;
					this.form.type.id=0;
				}
			},
			//级联数据的处理
			optionsDispose(){
				//先循环将所有的一级类型放到级联数组
				for(let item of this.types){
					if(item.pid == 0){
						let obj = {value:item.id,label:item.name};
						console.log(obj);
						this.options.push(obj);
					}
				}
				//在循环将二级类型放进去
				for(let type of this.types){
					if(type.pid > 0){
						for(let item of this.options){
							if(item.value == type.pid){
								let obj ={value:type.id,label:type.name};
								if(item.children == null){
									item.children = [];
								}
								item.children.push(obj);
							}
						}
					}
				}
				console.log(this.options);
			},
			//检查上传的文件或图片是否按照要求
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 512;
				if (!isJPG) {
					this.$message.error('上传图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 0.5MB!');
				}
				return isJPG && isLt2M;
			},
			//获取到需要上传的文件或图片函数
			handleChange(file,fileList){
				this.fileList = fileList;
				console.log(this.fileList);
			},
			
		},
		mounted(){
			this.findById();
			this.$get("/api/adm/type/findAll2")
			.then((resp)=>{
				this.types = resp.data.data;
				console.log(this.types);
				this.optionsDispose();
			})
		}
	}
</script>

<style scoped>
	.addUpdate-box{
		width: 100%;
		height: 100%;
	}
	.topBox{
		width: 100%;
		height: 60px;
		border-bottom: 1px solid #409eff;;
	}
	.topBox span{
		width: 25%;
		line-height: 60px;
		font-size: 20px;
		font-weight: 1000;
	}
	.topBox b{
		width: 25%;
		line-height: 60px;
		font-size: 20px;
		font-weight:200;
		color: #409eff;
	}
	.topBox button{
		border: none;
		background-color: white;
		width: 15%;
		margin-left: 10%;
		line-height: 60px;
		font-size: 20px;
		font-weight:200;
		color: #409eff;
	}
	.topBox a button{
		border: none;
		background-color: white;
		width: 15%;
		margin-left: 10%;
		line-height: 60px;
		font-size: 20px;
		font-weight:200;
		color: #409eff;
	}
	.addUpdateList{
		margin-top: 30px;
		width: 100%;
		height: 60%;
		display: flex;
	}
	.addUpdateListSon1{
		width: 50%;
		height: 100%;
	}
	.addUpdateListSon2{
		width: 40%;
		height: 100%;
	}
	.addUpdateListSon2 p{
		display: flex;
		margin-left: 7.5%;
		font-size: 18px;
	}
</style>